<template>
  <div class="profile-view common-mobile-view">
    <div class="profile-card">
      <div class="avatar-wrapper">
        <el-avatar
            :src="serviceFileRootPath + userStore.userInfo.avatar"
            alt="用户头像" :size="80"
        />

        <i v-if="userStore.userInfo.gender"
           class="fas fa-mars gender-icon" style="color: #409EFF"></i>
        <i v-else class="fas fa fa-venus gender-icon" style="color: #FFB6C1"></i>
      </div>

      <span class="user-name">{{ userStore.userInfo.accountName }}</span>

      <div class="user-info">
        <div class="info-item">
          <i class="fas fa-map-marker-alt"></i>
          <span>{{ userStore.userInfo.area.join('-') }}</span>
        </div>
        <div class="info-item">
          <i class="fas fa-birthday-cake"></i>
          <span>{{ userStore.userInfo.birthDate }}</span>
        </div>

        <div class="info-item">
          <i class="fas fa-user-tie"></i>
          <span>{{ userStore.userInfo.job }}</span>
        </div>
      </div>

      <div class="user-info">
        <div class="info-item">
          <i class="fas fa-mobile-alt"></i>
          <span>{{ userStore.userInfo.phoneNumber }}</span>
        </div>
        <div class="info-item">
          <i class="fas fa-envelope"></i>
          <span>{{ userStore.userInfo.email }}</span>
        </div>
      </div>

      <div class="user-info">
        <el-tag v-for="(item, index) in userStore.userInfo.tags"
                :key="index">{{ item }}</el-tag>
      </div>

      <span class="user-bio">{{ userStore.userInfo.description }}</span>
    </div>

    <div class="menu-card card-item">
      <div class="menu-item" @click="infoClick">
        <i class="fas fa-user"></i>
        <span>基本资料</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <div class="menu-divider"></div>
      <div class="menu-item">
        <i class="fas fa-file-alt"></i>
        <span>个人简历</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <div class="menu-divider"></div>
      <div class="menu-item">
        <i class="fas fa-cog"></i>
        <span>账户设置</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <div class="menu-divider"></div>
      <div class="menu-item" @click="passwordClick">
        <i class="fas fa-key"></i>
        <span>更改密码</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <div class="menu-divider"></div>
      <div class="menu-item" @click="refreshClick">
        <i class="fa-solid fa-arrows-rotate"></i>
        <span>检查更新</span>
        <i class="fas fa-chevron-right"></i>
      </div>

      <div class="menu-divider"></div>
      <div class="menu-item" @click="logoutClick">
        <i class="fas fa-sign-out-alt"></i>
        <span>退出登录</span>
        <i class="fas fa-chevron-right"></i>
      </div>
    </div>

    <div class="version">版本号 {{ appStore.version }}</div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/store/user.ts'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'

const userStore = useUserStore()
const appStore = useAppStore()
const router = useRouter()

onMounted(() => {
  userStore.queryUser()
})

const infoClick = () => {
  appStore.isShowMobileBack = true
  router.push('/home-home/profile/info')
}

const passwordClick = () => {
  // appStore.isShowMobileBack = true
  // router.push('/home-home/profile/password')
}

const refreshClick = async () => {
  await router.push('/')
  location.reload()
}

const logoutClick = () => {
  commonElMessageBox('请确认是否退出系统？').then(() => {
    userStore.removeAll()
    router.push('/')
  })
}
</script>

<style lang="scss">
.profile-view {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .profile-card {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    .avatar-wrapper {
      position: relative;
      display: inline-block;

      .gender-icon {
        position: absolute;
        right: 2px;
        bottom: 0;
        background: white;
        border-radius: 50%;
        padding: 3px;
      }
    }

    .user-name {
      font-size: 1.5rem;
    }

    .user-info {
      display: flex;
      justify-content: center;
      gap: 10px;
      font-size: 1.1rem;

      .info-item {
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }

  .menu-card {
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 5px;

    .menu-item {
      padding: 10px;
      display: grid;
      grid-template-columns: 20px 1fr 15px;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      font-size: 1.2rem;

      i {
        color: var(--el-color-primary);
      }

      span {
        color: var(--color-text);
      }
    }

    .menu-divider {
      height: 1px;
      background-color: #E8E8E8;
      margin: 0 5px;
    }
  }

  .version {
    align-self: center;
    color: #999;
  }
}
</style>
